<template>
  <div class="home">
    <app-header/>
    <div class="card">
      <banner/>
      <ball/>
      <div class="line"></div>
      <playlist-rcmd/>
    </div>
    <div class="card t10">
      <song-list-align/>
    </div>
    <div class="card t10">
      <music-mlog/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent,reactive, provide } from 'vue'
import { blockPage } from '@/services/homepage'
import { alldatakey } from './key'
// 获取首页数据
const getdata = () => {
  let alldata = reactive<any>({
    data: null
  })
  provide(alldatakey,alldata)
  blockPage().then(res=>{
    alldata.data = res.data.data
  })
}

export default defineComponent({
  name: 'HomeIndex',
  setup () {
    getdata()
    return {
    }
  },
  components: {
    AppHeader: defineAsyncComponent(() => import('./components/app-header.vue')),
    ball: defineAsyncComponent(() => import('./components/ball.vue')),
    PlaylistRcmd: defineAsyncComponent(() => import('./components/PlaylistRcmd.vue')),
    banner: defineAsyncComponent(() => import('./components/banner.vue')),
    SongListAlign: defineAsyncComponent(() => import('./components/SongListAlign.vue')),
    MusicMlog: defineAsyncComponent(() => import('./components/MusicMlog.vue'))
  }
})
</script>

<style lang="scss" scoped>
.home{
  .card{
    padding: 5px 0;
    background-color: #fff;
    border-radius: 10px;
  }
  .t10{
    margin-top: 10px;
  }
}
</style>
